<template>
    <Header title="注册" leftArrow="true" @onBarClickLeft="goHome"/>
    <div class="container">
        <div>
            <label for="user_name" class="field">用户名:</label>
            <input v-model="userData.user_name" id="user_name" type="text" placeholder="请输入用户名">
        </div>
         <div>
            <label for="password" class="field">密码:</label>
            <input v-model="userData.password" id="password" type="password" placeholder="请输入密码">
        </div>
         <div>
            <label class="field">管理员:</label>
            <input v-model="userData.isAdmin" id="is_admin" type="checkbox"><label for="is_admin">是</label>
        </div>
        <div>
            <button @click="regist">注册</button>
            <a href="" @click="goToLogin">去登录</a>
        </div>
    </div>
</template>

<script>
import { register } from "../api/user";
import { reactive, watch } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { Toast } from "vant/es/toast"
import "vant/es/toast/style"
import Header from "../components/Header.vue";

export default {
    props:{

    },
    emits: [

    ],
    components: {
        Header
    },
    setup() {
        const router = useRouter()
        const userData = reactive({
            user_name : '',
            password : '',
            isAdmin : 1//'是否为管理员, 0: 不是管理员(默认); 1: 是管理员'
        })
    
       watch(()=>userData.isAdmin,()=>{
 	      userData.isAdmin = userData.isAdmin  ? 1 : 0
        })

        function regist(){
            console.log("before regist", userData);
            register(userData).then((res) => {
                console.log("regist result success", res);
                Toast(res.message + "," + "请登录")
                goToLogin()
            })
        }

        function goToLogin(){
            router.push('/login')
        }
        const goHome = () => {
             router.push('/')
        }

        return {
            userData,
            regist,
            goToLogin,
            goHome
        }
    },
}
</script>

<style scoped>
.container{
    font-size: 15px;
    text-align:center;

    background: rgb(124, 199, 199);
}

.container div{
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

.field{
    flex: 0 0 120px;
}
</style>
